<template>
	<view style="padding-bottom:100px;">
		<view v-show="formValue.status == 'Checking'|| formValue.status == 'Passed' "><u-notice-bar :text="barTxt"></u-notice-bar></view>
		<view style="background-color: #F2F6FC;"><u-tabs :list="tags" @click="tagsClicked"></u-tabs></view>
		<!-- 店铺基础信息 -->
		<view name="基础信息" v-show="currentIndex == 0">
			<view name="门店头像" style="text-align: center;">
				<u-image customStyle="margin:20px auto;" :showLoading="true" :src="formValue.img" width="80px" height="80px"></u-image>
				<u-text customStyle="margin:0px auto;" type="info" text="店铺头像" :size="12"></u-text>
			</view>
			<u-cell-group :customStyle="{ 'margin-top': '30px' }">
				<u-cell title="类型" :value="formValue.shopTypeTxt">
					<view slot="value">{{ formValue.shopTypeTxt }}</view>
				</u-cell>
				<u-cell title="店铺名称" :value="formValue.shopName"></u-cell>
				<u-cell title="负责人" :value="formValue.charger"></u-cell>
				<u-cell title="身份证号码" :value="formValue.idNum"></u-cell>
				<view v-show="formValue.shopType == 'Company'"><u-cell title="纳税识别号" :value="formValue.businessNum"></u-cell></view>
				<u-cell title="电话" :value="formValue.phone"></u-cell>
				<u-cell title="微信" :value="formValue.wechat"></u-cell>
				<u-cell title="定位" :value="formValue.location.address"></u-cell>
				<u-cell title="地址" :value="formValue.addr"></u-cell>
				<u-cell title="状态" :value="formValue.statusTxt"></u-cell>
				<view v-show="formValue.status == 'UnPass' ">
					<u-cell title="审核备注" :value="formValue.checkRemark"></u-cell>
				</view>
			</u-cell-group>
		</view>

		<!-- 店铺营业执照 -->
		<view name="营业执照" v-show="currentIndex == 1" style="text-align: center;">
			<view name="身份证正面" style="text-align: center;">
				<u-image customStyle="margin:20px auto;" :showLoading="true" :src="formValue.idOnPicImg" width="200px" height="136px"></u-image>
				<u-text customStyle="margin:0px auto;" type="info" text="身份证正面" :size="12"></u-text>
			</view>
			<view name="身份证反面" style="text-align: center;">
				<u-image customStyle="margin:20px auto;" :showLoading="true" :src="formValue.idOffPicImg" width="200px" height="200px"></u-image>
				<u-text customStyle="margin:0px auto;" type="info" text="身份证反面" :size="12"></u-text>
			</view>

			<view name="手持身份证" style="text-align: center;">
				<u-image customStyle="margin:20px auto;" :showLoading="true" :src="formValue.idHandPicImg" width="200px" height="200px"></u-image>
				<u-text customStyle="margin:0px auto;" type="info" text="半身手持身份证照" :size="12"></u-text>
			</view>

			<view v-show="formValue.shopType == 'Company'" name="营业执照" style="text-align: center;">
				<u-image customStyle="margin:20px auto;" :showLoading="true" :src="formValue.businessPicImg" width="200px" height="118px"></u-image>
				<u-text customStyle="margin:0px auto;" type="info" text="营业执照" :size="12"></u-text>
			</view>
		</view>

		<view name="其他" v-show="currentIndex == 2">
			<u-cell-group customStyle="font-size:12px;">
				<u-cell title="介绍" :value="formValue.intro"></u-cell>
				<u-cell title="拥有技能" value=""></u-cell>
			</u-cell-group>
			<u-checkbox-group :disabled="true" :value="formValue.skills" iconPlacement="right" placement="column" @change="skillChanged">
				<view style="margin:10px 20px 5px 20px;" v-for="(item, itemIndex) in formValue.skills" :key="itemIndex">
					<u-checkbox labelSize="14px" :checked="true" :label="item"></u-checkbox>
				</view>
			</u-checkbox-group>
		</view>
	
	 <!-- 底部操作按钮部分 -->
	 <view name="按钮" style="margin:50px 10px 50px 10px" >
		 <view v-show="formValue.status!='Saving'"><u-button type="primary" @click="toPage('/pages/shop/applyOpen/index')" >修改信息</u-button></view>
		 <view v-show="formValue.status == 'Passed' || formValue.status == 'On' || formValue.status =='Off' " style="margin-top: 20px;" >
			 <u-button block @click="showOnOffPicker = true" >店铺状态</u-button>
		 </view>
	 </view>
	
	<!-- 隐藏组件 -->
	<u-action-sheet :actions="OnOffList" cancelText="取消" title="选择" @select="busStatusSelected" @close="showOnOffPicker=false" :show="showOnOffPicker"></u-action-sheet>
	
	</view>
</template>

<script>
import { SexOpts, DefaultHead, Toast } from '@/utils/common.js';
import { IMG_SERVER, Request, VITE_API_URL } from '@/utils/request.js';
import { User } from '@/utils/user.js';
export default {
	data() {
		return {
			OnOffList:[{name:"营业",value:"On"},{name:"休息",value:"Off"}],
			showOnOffPicker:false,//显示隐藏上下线选择
			barTxt: '',
			currentIndex: 0,
			tags: [{ name: '基础信息' }, { name: '图片' }, { name: '其他' }],
			statusOpts: [],
			formValue: {
				shopType: '',
				shopTypeTxt: '',
				shopName: '',
				charger: '',
				idNum: '', //身份证号码
				businessNum: '', //纳税识别号
				phone: '',
				wechat: '',
				addr: '',
				location: { lat: null, lng: null, address: '' },
				poster: '',
				img: '',
				idOnPicImg: IMG_SERVER + '/images/id_pic_on.png', //身份证正面显示图片
				idOnPic: '', //身份证正面图片
				idOffPicImg: IMG_SERVER + '/images/id_pic_off.png', //身份证反面显示图片
				idOffPic: '', //身份证反面图片
				idHandPicImg: IMG_SERVER + '/images/id_hand.png', //手持身份证照
				idHandPic: '',
				businessPicImg: IMG_SERVER + '/images/business.png', //营业执照显示图片
				businessPic: '', //营业执照图片
				intro: '', //门店介绍
				skills: [], //拥有技能
				status: '', //状态
				statusTxt: '' //状态文字
			}
		};
	},
	onLoad() {},
	onShow() {
		let _ = this;
		Request.get('/api/shop/status', {}).then(res => {
			_.statusOpts = res;
			_.loadData();
		});
	},
	methods: {
		//营业状态选择事件
		busStatusSelected(res){
			console.log("营业状态选择结果",res);
		},
		//页面跳转
		toPage(page){
			uni.redirectTo({
				url:page,
			});
		},
		//tag点击事件
		tagsClicked(res) {
			console.log('tags点击', res);
			this.currentIndex = res.index;
		},
		//加载门店信息
		loadData() {
			Toast.loading();
			let _ = this;
			Request.get('/api/shop/detail', {})
				.then(res => {
					if (res.shopId && res.shopId > 0) {
						_.formValue = res;
						_.formValue.img = IMG_SERVER + res.poster;
						_.formValue.shopTypeTxt = res.shopType == 'Personal' ? '个人' : '公司';
						_.formValue.idOnPicImg = IMG_SERVER + (res.idOnPic == '' ? '/images/id_pic_on.png' : res.idOnPic);
						_.formValue.idOffPicImg = IMG_SERVER + (res.idOffPic == '' ? '/images/id_pic_off.png' : res.idOffPic);
						_.formValue.businessPicImg = IMG_SERVER + (res.businessPic == '' ? '/images/business.png' : res.businessPic);
						_.formValue.idHandPicImg = IMG_SERVER + (res.idHandPic == '' ? '/images/id_hand.png' : res.idHandPic);
						_.statusOpts.forEach((item, index, arr) => {
							if (item.value == res.status) {
								_.formValue.statusTxt = item.name;
							}
						});
						_.setBarTxt();
						console.log('门店信息===>', _.formValue);
					}
					Toast.hideLoading();
				})
				.catch(res => {
					Toast.hideLoading();
				});
		},
		//设置顶部通知内容
		setBarTxt() {
			let _ = this;
			if (_.formValue.status == 'Checking') {
				_.barTxt = '门店信息已提交审核,我们将在3个工作日内完成审核,请耐心等待';
			}else if(_.formValue.status == 'Passed'){
				_.barTxt = '恭喜您，店铺信息已通过审核。赶紧上线接受订单吧...';
			}
		}
	}
};
</script>

<style></style>
